<template>
  <div class="directory-box">
    <div class="title">
      <img src="../../../assets/mulu.png" class="icon" alt=""> 目录
    </div>
    <div class="subtitle">开篇摘要</div>
    <div class="content-box" v-html="article.content"></div>
  </div>
</template>

<script>
export default {
  props: {
    article: {
      type: Object,
      default() {
        return {};
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.directory-box {
  margin-bottom: 72px;
  .title {
    height: 24px;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4C4C4C;
    line-height: 24px;
    margin-bottom: 24px;
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 9px;
      vertical-align: middle;
    }
  }
  .subtitle {
    height: 28px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4C4C4C;
    line-height: 28px;
    margin-bottom: 12px;
  }
  .content-box {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #272727;
    line-height: 28px;
    word-break: break-all;
    /deep/img {
      max-width: 100%;
      object-fit: contain;
    }
    /deep/pre {
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>